<script setup>
  import { Edit, Delete } from '@element-plus/icons-vue'
  import { ref } from 'vue'
  import ManageOption from '@/views/article/components/ManageOption.vue'
  import { artListService, artDeleteService } from '@/api/artcile'
  import { formatDate } from '@/utils/dayjs'
  import ArticleEdit from '@/views/article/components/ArticleEdit.vue'

  // 文章列表数据
  const dataList = ref([])

  // 定义请求参数对象
  const params = ref({
    pagenum: 1,
    pagesize: 10,
    cate_id: '',
    state: ''
  })

  // 总页数
  const total = ref(0)

  // loading 状态
  const loading = ref(false)

  //请求列表数据
  const getArticleList = async () => {
    loading.value = true
    const res = await artListService(params.value)
    total.value = res.total
    dataList.value = res.data
    loading.value = false
  }

  getArticleList()

  // 分页相关事件
  const onSizeChange = size => {
    params.value.pagenum = 1
    params.value.pagesize = size
    getArticleList()
  }

  // 当前页码改变
  const onCurrentChange = page => {
    params.value.pagenum = page
    getArticleList()
  }

  // 搜索按钮
  const onSearch = () => {
    params.value.pagenum = 1
    getArticleList()
  }

  // 重置按钮
  const resert = () => {
    params.value.cate_id = ''
    params.value.state = ''
    params.value.pagenum = 1
    getArticleList()
  }

  // 抽屉组件实例化
  const drawerRef = ref()

  // 添加文章
  const AddArticle = () => {
    // drawer.value = true
    drawerRef.value.open({})
  }

  // 编辑文章
  const onEdit = row => {
    drawerRef.value.open(row)
  }
  // 删除文章
  const onDelete = async row => {
    // 提示用户是否删除
    await ElMessageBox.confirm('此操作将永久删除该文章，是否删除', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    // 删除
    const res = await artDeleteService(row.id)
    ElMessage.success('删除成功')
    // 重新渲染列表
    getArticleList()
  }

  // 添加文章成功时
  const onSuccess = type => {
    if (type === 'add') {
      // 如果是添加
      // total.value + 1 添加时后台数据比我们多一条，因此加一，得出真正的总数
      // 总数除以页数得出页码 , 跳转到最后一页
      params.value.pagenum = Math.ceil(
        (total.value + 1) / params.value.pagesize
      )
    }
    getArticleList()
  }
</script>
<template>
  <page-container title="文章管理">
    <template #extra>
      <el-button type="primary" @click="AddArticle">添加文章</el-button>
    </template>

    <!-- 表单区域 -->
    <el-form inline>
      <el-form-item style="width: 300px" label="文章分类">
        <!-- vue3 中 v-model 是 :modelValue 和 @updatemodelValue 的简写 -->
        <ManageOption v-model:cid="params.cate_id"></ManageOption>
        <!-- <ManageOption v-model:cid="params.cate_id"></ManageOption> -->
      </el-form-item>

      <el-form-item style="width: 300px" label="发布状态">
        <el-select v-model="params.state">
          <el-option label="已发布" value="已发布"></el-option>
          <el-option label="草稿" value="草稿"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button @click="onSearch" type="primary">搜索</el-button>
        <el-button @click="resert">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格区域 -->
    <el-table :data="dataList" v-loading="loading">
      <el-table-column label="文章标题">
        <template #default="{ row }">
          <el-link type="primary" underline="never">{{ row.title }}</el-link>
        </template>
      </el-table-column>

      <el-table-column prop="cate_name" label="分类"></el-table-column>
      <el-table-column prop="pub_date" label="发表时间">
        <template #default="{ row }">
          {{ formatDate(row.pub_date) }}
        </template>
      </el-table-column>

      <el-table-column prop="state" label="状态"></el-table-column>
      <el-table-column prop="" label="操作">
        <template #default="{ row }">
          <el-button
            type="primary"
            :icon="Edit"
            plain
            circle
            @click="onEdit(row)"
          ></el-button>
          <el-button
            type="danger"
            :icon="Delete"
            plain
            circle
            @click="onDelete(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      v-model:current-page="params.pagenum"
      v-model:page-size="params.pagesize"
      :page-sizes="[2, 3, 5, 10]"
      :background="true"
      layout="jumper,total,sizes, prev,pager,next"
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="justify-content: flex-end; margin-top: 40px"
    />
    <!-- 抽屉组件 -->
    <ArticleEdit @success="onSuccess" ref="drawerRef"></ArticleEdit>
  </page-container>
</template>

<style lang="scss" scoped></style>
